<template>
  <div class="page todo-list">
    <div class="scroll-view">
      <customHeader middleTitle="待办事项"></customHeader>
      <ul class="nav-bar">
        <li
          v-for="(item,index) in tabNav"
          :key="index"
          :class="{active:tabIndex===index}"
          @click="tabClick(index)"
        >
          <span>{{item}}</span>
        </li>
      </ul>
      <div class="page-body">
        <ul class="tab-container" 
            v-infinite-scroll="loadMore"
            infinite-scroll-disabled="loading"
            infinite-scroll-distance="30">
          <li
            class="item"
            @click="linkToDetail(item)"
            v-for="(item,index) in list"
            :key="index"
          >
            <template v-if="item.msgTitleType===2">
              <div class="item-title">
                <span class="left">{{item.msgTitle}}</span>
                <span
                  class="right"
                  v-if="item.msgStatus===0"
                >{{item.createTime&&item.msgStatus ==0?CommonUtil.timestampToTime(item.createTime):''}}</span>
              </div>
              <div class="item-content">
                <ul>
                  <li>
                    <span class="left">门店名称</span>
                    <span
                      v-if="item.msgContent"
                      class="right"
                    >{{JSON.parse(item.msgContent).shopName}}</span>
                  </li>
                  <li v-if="item.msgStatus ==0">
                    <span class="left">活动开始时间</span>
                    <span class="right">{{CommonUtil.timestampToTime(JSON.parse(item.msgContent).activityStartTime)}}</span>
                  </li>
                  <li v-if="item.msgStatus ==0">
                    <span class="left">活动结束时间</span>
                    <span class="right">{{CommonUtil.timestampToTime(JSON.parse(item.msgContent).activityEndTime)}}</span>                 
                  </li>
                  <template v-if="item.msgStatus ==1||item.msgStatus ==2">
                    <li>
                      <span class="left">处理结果</span>
                      <span v-if="item.msgStatus ==1" class="right">同意</span>
                      <span v-if="item.msgStatus ==2" class="right">驳回</span>
                    </li>
                    <li>
                      <span class="left">处理人</span>
                      <span class="right">{{item.operator}}</span>
                    </li>
                    <li>
                      <span class="left">处理时间</span>
                      <span class="right">{{CommonUtil.timestampToTime(item.updateTime)}}</span>
                    </li>
                  </template>
                  <template v-if="item.msgStatus ==3||item.msgStatus ==4">
                    <li>
                      <span class="left">失效时间</span>
                      <span class="right">{{CommonUtil.timestampToTime(item.updateTime)}}</span>
                    </li>
                    <li>
                      <span class="left">失效原因</span>
                      <span class="right">
                        <div v-for="(r,index) in item.rejectReasonList" :key="index" class="text-overflow">{{r}}</div>
                      </span>
                    </li>
                  </template>
                </ul>
              </div>
              <div class="item-option" v-if="item.msgStatus ==0">
                <div class="option">立即处理</div>
              </div>
              <div class="item-option" v-if="item.msgStatus !==0">
                <div class="option">查看详情</div>
              </div>
            </template>
            <template v-if="item.msgTitleType!==2">
              <div class="item-title">
                <span class="left">{{item.msgTitle}}</span>
                <span
                  class="right"
                >{{item.createTime&&item.msgStatus ==0?CommonUtil.timestampToTime(item.createTime):''}}</span>
              </div>
              <div class="item-content">
                <ul>
                  <li>
                    <span class="left">门店名称</span>
                    <span v-if="item.msgContent" class="right">{{JSON.parse(item.msgContent).A}}</span>
                  </li>
                  <li>
                    <span class="left">门店ID</span>
                    <span v-if="item.msgContent" class="right">{{JSON.parse(item.msgContent).B}}</span>
                  </li>
                  <li v-if="item.msgStatus !==0">
                    <span class="left">操作</span>
                    <span class="right" v-if="item.msgStatus ==1">同意</span>
                    <span class="right" v-if="item.msgStatus ==2">驳回</span>
                  </li>
                  <li v-if="item.msgStatus !==0">
                    <span class="left">操作时间</span>
                    <span
                      class="right"
                    >{{item.updateTime?CommonUtil.timestampToTime(item.updateTime):''}}</span>
                  </li>
                </ul>
              </div>
              <div class="item-option" v-if="item.msgStatus ==0">
                <div class="option">立即处理</div>
              </div>
              <div class="item-option" v-if="item.msgStatus !==0">
                <div class="option">查看详情</div>
              </div>
            </template>
          </li>
        </ul>
         <p v-show="loading" class="page-infinite-loading">
            <mt-spinner :style="{display:'inline-block'}" type="fading-circle"></mt-spinner>
          </p>
        <div v-show="noMore&&!hasError"
             class="no-more">已经全部加载完毕</div>
        <noData msg="暂无数据"
                v-if="!loading&&hasError" />
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import customHeader from "../../components/header/header";
import noData from "../../components/noData/noData";
import { Toast, MessageBox } from "mint-ui";
import jsBridge from "../../tools/jsBridge.js";
export default {
  name: "todoList",
  data() {
    return {
      CommonUtil: CommonUtil,
      tabNav: ["待处理", "已完成", "已失效"],
      loading: false,
      nextPage: 1,
      msgStatusList: [0],//消息状态：0未处理;1同意;2驳回;3已撤销;4已失效;
      tabIndex: 0,
      noMore: false,
      hasError: false,
      list: [],
      todoTotalCount: '',
    };
  },
  methods: {
    setNavShow() {
      let temp = '';
      if (this.todoTotalCount) {
        if (this.todoTotalCount > 99) {
          temp = '(99+)';
        } else {
          temp = '(' + this.todoTotalCount + ')';
        }
      };
      this.tabNav[0] = "待处理" + temp;
    },
    resetList() {
      this.nextPage=1;
      this.list = [];
      this.noMore = false;
    },
    //tab切换
    tabClick(index) {
      this.tabIndex = index;
      // 记录当前选中的tab
      sessionStorage.setItem("todoListTabIndex", index);
      this.resetList();
      this.getTotalCount();
      if (index === 0) {
        this.msgStatusList = [0];
        this.loadData(1);
      } else if (index === 1) {
        this.msgStatusList = [1, 2];
        this.loadData(1);
      } else if (index === 2) {
        this.msgStatusList = [3, 4];
        this.loadData(1);
      }
    },
    linkToDetail(item) {
      let query = {
        msgId: item.msgId,
        msgStatus: item.msgStatus
      };
      if (item.msgTitleType == 2) {//返现营销
        this.$router.push({ path: "/todoList/fxActivitySigningDetails", query: query });
      } else {
        this.$router.push({ path: "/todoList/todoDetailOpenPay", query: query });
      }

    },
    // getTodoDetail() {
    //   sessionStorage.removeItem("todoDetail");
    //   const promise = new Promise(function(resolve, reject) {
    //     this.ajax({
    //       url: "/newapp/AppMsg/getMsgDetails.do",
    //       type: "get",
    //       controlLoading: true
    //     })
    //       .then(res => {
    //         resolve(res);
    //       })
    //       .catch(err => {
    //         Toast(err.msg);
    //         reject();
    //       });
    //   });
    // },
    getTotalCount() {
      let url = "/newapp/AppMsg/getCountForNewsCenter.do";
      this.ajax({
        url: url,
        type: "get",
        controlLoading: false
      })
        .then(res => {
          if (res.success && res.resultObject && res.resultObject.appMsgVoList) {
            let temp = res.resultObject.appMsgVoList;
            for (let i = 0; i < temp.length; i++) {
              if (temp[i].type == '0') {
                this.todoTotalCount = temp[i].count;
                this.setNavShow();
              }
            }
          }
        })
        .catch(err => {

        });
    },
    loadData(page) {
      this.loading = true;
      if (page == undefined) {
        page = 1;
      }
      let url = "/newapp/AppMsg/getMsgList.do";
      let param = {
        currentPage: page,
        pageSize: 10,
        msgType: 0,
        msgStatusList: this.msgStatusList
      };
      this.ajax({
        url: url,
        type: "post",
        data: param,
        controlLoading: false
      })
        .then(res => {
          if (res.success) {
            var data = res.resultObject;
            //最后一页将noMore设置为true
            if (data != null && JSON.stringify(data) != "{}" &&data.dataList && data.dataList.length>0) {
              this.list = this.list.concat(data.dataList);
              if (this.tabIndex == 0) {
                this.todoTotalCount = data.totalCount;
                this.setNavShow();
              }
              if (data.totalCount > this.list.length) {
                this.nextPage += 1;
              } else {
                this.noMore = true;
              }
            } else {
              this.noMore = true;
            }
          } else {
            this.noMore = true;
            this.hasError = true;
            Toast(res.msg || '待办事项查询失败，请稍后重试');
          }
          this.loading = false;
          if (this.list.length == 0) {
            this.hasError = true;
          } else {
            this.hasError = false;
          }
        })
        .catch(err => {
          this.loading = false;
          this.noMore = true;
          if (this.list.length == 0) {
            this.hasError = true;
          } else {
            this.hasError = false;
          }
        });
    },
    //无限加载
    loadMore() {
      if (this.loading || this.noMore) {
        return;
      }
      this.loadData(this.nextPage);
    },
    init() {
      const index = Number(sessionStorage.getItem("todoListTabIndex"));
      this.tabIndex = index ? index : 0;
      if (this.tabIndex === 0) {
        this.msgStatusList = [0];
      } else if (this.tabIndex === 1) {
        this.msgStatusList = [1, 2];
      } else if (this.tabIndex === 2) {
        this.msgStatusList = [3,4];
      } else {
        return;
      }
      this.getTotalCount();
      //this.loadData(1);
    }
  },
  created() {
    this.init();
  },
  mounted() {

  },
  components: {
    customHeader,
    noData
  }
};
</script>
<style lang='scss' scoped>
@import "NotificationCenter";
</style>
